<template>
  <div class="app">
    <h3>我是App组件（祖组件）,{{ name }} -- {{ price }}</h3>
    <child-com></child-com>
  </div>
</template>

<script>

import ChildCom from "@/components/ChildCom.vue";
import {provide, reactive, toRefs} from "vue";

export default {
  name: 'App',
  components: {ChildCom},
  setup() {
    // 数据
    let car = reactive({
      name: '奔驰',
      price: '40w'
    })
    // 方法
    provide('car', car)
    // 返回对象
    return {
      ...toRefs(car)
    }
  }
}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
